<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <!-- <router-link to="/home" tag="button">首页</router-link>
    <router-link to="/about" tag="button">内容</router-link>-->
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">内容</button>
    <!-- <router-link :to="'/user/' + userId" tag="button">用户</router-link>
    <router-link :to="{path:'/profile',query:{name:'Taec',age:18 }}" tag="button">档案</router-link>-->
    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    homeClick() {
      this.$router.push("/home");
      console.log("aaa");
    },
    aboutClick() {
      this.$router.push("/about");
      console.log("bbb");
    },
    userClick() {
      this.$router.push("/user/" + this.userId);
      console.log("ccc");
    },
    profileClick() {
      this.$router.push({
        path: "/profile",
        query: {
          name: "Taec",
          age: 18
        }
      });
      console.log("ddd");
    }
  },
  data() {
    return {
      userId: "12Taec"
    };
  }
};
</script>

<style>
#app {
  height: 100%;
  width: 100%;
}
</style>
